<template>
	<div class="title">
		<div class="l">
			<h5>{{ data.title }}</h5>
		</div>
		<div class="r">
			<el-button plain @click="reload()" v-if="data.reload"><b class="iconfont icon-refresh"></b></el-button>
			<el-button 
			v-for="(item, index) in data.dialogs" :key="index"
			v-if="item.auth"
			@click="changeVisible(index, item.visible)"
			:type="item.type">
			{{ item.title }}
			</el-button>
			<router-link tag="el-button" 
			v-for="(item, index) in data.buttons" :key="(index + 100)"
			v-if="item.auth"
			type="button" 
			:class="'el-button--' + item.type" 
			:to="{name: item.pathName, query: item.query}">
			{{ item.title }}
			</router-link>
		</div>
	</div>
</template>

<script>
export default {
	inject: ['reload'],
	props: ['data'],
	data() {
		return {

		};
	},
	methods: {
		/*改变父组件的值*/
		changeVisible: function(v){
			this.$emit('changeVisible', v)
		}
	}
};
</script>

<style lang="stylus" scoped>
.title
	height: 36px
	line-height: 36px
	border-bottom: 1px solid #eee;
	display: flex
	.l
		flex: 1
		h5
			margin-top: 8px
			line-height: 14px
			font-size: 14px
			border-left: 2px solid #88b7e0
			padding-left: 10px
	.r
		flex: 1
		text-align: right
		padding-top: 3px
		/deep/ .el-button + .el-button
			margin-left: 2px
		/deep/ .el-button--small
			padding: 7px 15px
			vertical-align: top
			display: inline-block
		/deep/ .is-plain
			padding: 5px 15px
			
			
</style>